<template>
    <div class="top-role"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    :style="{ 'cursor': hover ? 'pointer' : 'default' }">
        <el-dropdown @command="handleCommand">
            <div class="menu">
                <img src="../assets/gotion_logo1.png">
                <span>账号管理</span>
                <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                <el-dropdown-item divided command="b">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<style scoped>
.top-role {
  height: 1.875rem;
  font-size: 1rem;
  position: absolute;
  right: 1.25rem;
}
.menu{
    display: flex;
    align-items: center;
}
img{
    width: 1.875rem;
    height: 1.875rem;
}
</style>
<script>
export default{
    data(){
        return{
            hover:false
        }
    },
    methods:{
        handleCommand(command){
            if(command=='a'){
                this.$router.push('/center');
            }
            if(command=='b'){
                this.$confirm('确定注销并退出系统吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/');
                    this.$message({
                        type: 'success',
                        message: '退出系统成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });          
                })
            }
        }
    }
}
</script>